<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html lang="zh-tw">
<head>
<meta charset="UTF-8">
<title>${card.title}</title>
<!-- favicon -->
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico">
<link rel="Bookmark" href="images/favicon.ico" type="image/x-icon"/>
<!-- reset.css -->
<link rel="stylesheet" href="css/reset.css" media="screen">
<!-- Skeleton grid system -->
<link rel="stylesheet" href="css/skeleton.css" media="screen">
<!-- css -->
<link rel="stylesheet" href="css/style.css" media="screen">
<!-- rwdmenu -->
<link type="text/css" rel="stylesheet" href="css/jquery.mmenu.css" />
<!-- welcome2 css -->
<link style="text/css" rel="stylesheet" href="css/rwdmenu_main.css" />

<!-- font-awesome.css -->
<link rel="stylesheet" href="css/font-awesome.min.css" media="screen">
<!-- xmas -->
<link rel="stylesheet" href="css/xmas.css" media="screen">

<!-- Layout and Media queries-->
<link rel="stylesheet" href="css/layout.css" media="screen">
<script src="js/modernizr.custom.js"></script>
<!--[if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
<!-- Mobile Specific Meta -->
<meta name="viewport"
	content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0">

</head>
<body class="welcomebody">

	<div id="page">
		<div class="header FixedTop">
			<a href="#menu" class="headericon"></a>
			<img src="images/logo.png" alt="proactive Logo">
		</div><!-- header -->
		<div class="content">
			<div class="list-screen clearfix">
				<div class="navfull">
					<div class="container">
						<div class="grid_12">
							<div class="logo"><a href="index">Proactive</a></div>
							<ul class="topnav">
							<c:forEach items="${menuList}" var="menu">
								<li>
									<a href="${menu.url}" class="${menu.classString1}">
										${menu.icon}
										${menu.name}
									</a>
								</li>
							</c:forEach>	
							</ul>
							<ul class="login">
								<li>
									<a href="aboutme?id=${loginMember.memberNO}" class="loginImg">
										<img src="${loginMember.photoPath}">
									</a>
									<ul class="loginDropdown hide">
										<li><a href="aboutme?id=${loginMember.memberNO}">關於我</a></li>
										<li><a href="memberCourse?id=${loginMember.memberNO}">我創作</a></li>		
										<li><a href="collectCourse?id=${loginMember.memberNO}">我收藏</a></li>
										<li><a href="memberCard?id=${loginMember.memberNO}">耶誕卡片</a></li>	
										<li><a href="logout">登出</a></li>
									</ul>
								</li>							
							</ul>
						</div>
					</div>
				</div>
			</div>


			<div class="hotissue">
				<div class="container">
					<div class="grid_12">
						
						<header class="sectionHeader">
							<h2><i class="fa fa-sun-o"></i> 修改祝福 & 照片 <i class="fa fa-sun-o"></i></h2>				
						</header>
					</div>		
					<div class="prefix_2 grid_8">
						<div class="addCardForm">
							<form id="sendForm" method="post" enctype="multipart/form-data" action="modiCard">
								<input type="hidden" name="id" value="${card.id}">
								<label>
									<strong>Step1 : 上傳圖片</strong>
									<div class="uploadCardPic">
										<input type="file" id="image" name="image" value="上傳圖片">
										<span id="imgText"><i class="fa fa-picture-o"></i> 選擇照片上傳</span>
										<!-- <span><i class="fa fa-picture-o"></i> 重選圖片上傳</span> -->
									</div>
								</label>

								<label>
									<strong>Step2 溫暖祝福 :<span class="limitAlert">最多300字</span></strong> 
									<textarea name="content" id="content" cols="30" rows="10" placeholder="寫下你的祝福...">${card.content}</textarea>
								</label>

								<label>
									<strong>Step3 卡片標題:<span class="limitAlert">分享時會顯示此標題~</span></strong>
									<input type="text" class="txt" name="title" placeholder="取個有吸引力的標題" value="${card.title}">
								</label>
								<div class="banner minh800px">
									<iframe  id="view" src="cardHtml?id=${card.id}" frameborder="0" width="100%" height="600">
									</iframe>
								</div>
								<label class="checkboxCard"><input type="checkbox" name="status" value="2" ${card.show?"":"checked"}>不在活動頁公開此卡片 ~</label>
								<button type="button" class="completeCardBtn" id="send"> 儲存卡片</button>
								<a href="memberCard?id=${loginMember.memberNO}" class="cancelCardBtn">取消</a>
							</form>
						</div>
					</div>
				</div>

			</div>

			<footer class="footerbwrap">
				<div class="container">
					<div class="grid_12">
						<span>©2014 PROACTIVE </span> 
						<a href="https://www.facebook.com/pages/Proactive/579983748802096"><img src="images/icon_fb.png" alt="proactive facebook粉絲頁"></a>
						<a href="https://www.youtube.com/channel/UC4SGQg8Qjj5YcgOmopSmk0g"><img src="images/icon_youtube.png" alt="proactive egroup youtube頻道"></a>
					</div>
				</div>
			</footer>
	    </div><!-- content -->

		<!-- 左側meum滑出 -->
		<nav id="menu">
			<ul>		 
				<li class="logo"><a href="index">美編網</a></li>
				<c:forEach items="${menuList}" var="menu">				
				<li class="${menu.classString2}">
					<a class="${menu.classString1}" href="${menu.url}">${menu.icon}${menu.name}</a>
				</li>
				</c:forEach>
 				<li class="menumember">hi, ${loginMember.name}</li>
				<li class="menumember"><a href="aboutme?id=${loginMember.memberNO}"><img src="images/aboutme.png">關於我</a></li>
				<li class="menumember"><a href="memberCourse?id=${loginMember.memberNO}"><img src="images/mycreation.png">我創作</a></li>
                <li class="menumember"><a href="collectCourse?id=${loginMember.memberNO}"><img src="images/mystar.png">我收藏</a></li>
				<li class="menumember"><a href="logout">登出</a></li>
			</ul>
		</nav>
	</div><!-- page -->
	
	<!-- import jquery -->
	<script
		src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>



	<!-- some jquery method we use -->
	<script src="js/hoverjquery.js"></script>
	<script src="js/listscreen.js"></script>	
	<script src="js/ourjquery.js"></script>	
	<script type="text/javascript" src="js/rwdmenu_main.js"></script>
	<!-- tab -->
  	<script src="js/jquery.hashchange.min.js"></script>
 	<script src="js/jquery.easytabs.min.js"></script>
	<!-- rwdmenu -->
	<script type="text/javascript" src="js/jquery.mmenu.min.all.js"></script>
	<!-- validate -->
    <script src="js/jquery.validate.js"></script>
    <script src="js/messages_zh_TW.js"></script>
    <script src="js/additional-methods.js"></script>
    <!-- preview image -->
	<script src="js/previewimg.js"></script>
	
  	<script src="js/responsiveslides.min.js"></script>
  	
  	<script>
	$(function() {
		$('#tab-container').easytabs();
		$('nav#menu').mmenu();
		$(".rslides").responsiveSlides({
		  speed: 2000,            // Integer: Speed of the transition, in milliseconds
		  timeout: 4000,          // Integer: Time between slide transitions, in milliseconds
		});	    
		
		$("#send").click(function(){
			
			$("#send").attr("disabled", true);
			$("#sendForm").submit();
		});
		
		$("#sendForm").validate({
			rules:{
				title:"required",
				content:{
					required:true,
					maxlength:300
				},
				image:{
					extension:"jpg|png|jpeg|gif",
    				filesize:2097152
				}
			},
			messages:{
				title:"請填寫標題",
				content:{
					required:"請填寫內容",
					maxlength:"字數不可超過{0}"
				},
				image:{
					extension:"檔案格式錯誤，請選擇圖片格式",
    				filesize:"圖片大小上限為2MB"
				}
			},
    	    invalidHandler: function(event, validator) {
    	    	$("#send").attr("disabled", false);
    	    }
		});

		$('#view').load(function(){
			var $iframe = $(this),
				$contents = $iframe.contents();
			var oldImage = $contents.find('#preview_img').attr("src");
			$("#image").change(function(){
				previewImage(this,$contents.find('#preview_img'),oldImage);
				if($(this).val()!="")
					$("#imgText").html('<i class="fa fa-picture-o"></i> 重選圖片上傳');
				else
					$("#imgText").html('<i class="fa fa-picture-o"></i> 選擇照片上傳');
			});
			$("#content").keyup(function(){//.replace(/(\s)|(\n)/g,"&nbsp;")
				$contents.find('#preview_text').html($(this).val().replace(/\n/g,'<br/>').replace(/(\s)|(\n)/g,"&nbsp;"));
				//$contents.find('#preview_text').html($(this).val().replace(/(\s)|(\n)/g,"&nbsp;"));
			});
		});
	});
	</script>

</body>
</html>